<template>
  <div class="movie-detail-header-container">
    <div class="top">
        <div class="poster">
            <Image class="img" mode="aspectFill" :src="info?.pic" alt="" />
        </div>
        <div class="content">
            <div class="title">
                <div class="txt">
                    {{info?.name}}
                </div>
            </div>
            <div class="score">
                <div class="name">
                    评分
                </div>
                <div class="value">
                    {{info?.grade}}
                </div>
            </div>
            <div class="like" v-show="false">
                <div class="name">
                    想看
                </div>
                <div class="value">
                    <nut-price
                        :price="10678"
                        thousands
                        :decimal-digits="0"
                        symbol="人"
                        position="after"
                    />
                </div>
            </div>
            <div class="types">
                <div class="item" v-for="(item,index) in formatFilmTypes(info?.film_types)">{{item}}</div>
            </div>
            <div class="date">
                {{formatPublishDate(info?.publish_date)}}
            </div>
            <div class="desc">
                主演：{{info?.cast}}
            </div>
        </div>
    </div>
    <div class="bottom">

    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed, toRefs } from 'vue';
import { dateStrChangeTimeTamp, timestampToTimeYMD } from "../../utils/tools";
const props = defineProps({
  //子组件接收父组件传递过来的值
  info: Object,
});
//使用父组件传递过来的值
const { info } = toRefs(props);
// 【格式化】影片类型
const formatFilmTypes = computed(() => {
  return (str) => {
    console.log(str)
    return str.split("|") || [];
  };
});
// 【格式化】上映时间
const formatPublishDate = computed(() => {
  return (str) => {
    const timeTamp = dateStrChangeTimeTamp(str);
    return timestampToTimeYMD(timeTamp)
      ? timestampToTimeYMD(timeTamp) + "上映"
      : null;
  };
});
</script>
<style lang="scss">
.movie-detail-header-container {
  display: flex;
  flex-direction: row;
  color: #15181d;
  align-items: center;
  padding: 25px;
  background: #ffffff;
  .top{
    display: flex;
    flex-direction: row;
        height: 300px;
    .poster {
        width: 200px;
        border-radius: 10px;
        overflow: hidden;
        position: relative;
        margin-right: 15px;
        .img {
            width: 100%;
            height: 100%;
        }
    }
    .content{
        font-size: 24px;
        display: flex;
        flex-direction: column;
        flex: 1;
        padding: 10px;
        color: #858a99;
        .title{
            flex: 1;
            font-weight: 500;
            color: #15181d;
            font-size: 38px;
            line-height: 48px;
            .txt {
                display: -webkit-box;
                /* autoprefixer: ignore next */
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                text-overflow: ellipsis;
                overflow: hidden;
            }
        }
        .score{
            display: flex;
            flex-direction: row;
            align-items: flex-end;
            .value{
                font-size: 42px;
                line-height: 42px;
            font-weight: 500;
                color: #FFC800;
                margin-left: 10px;
                flex: 1;
            }
        }
        .like{
            display: flex;
            flex-direction: row;
            align-items: flex-end;
            .value{
                color: #FFC800;
                margin-left: 10px;
                flex: 1;
                .nut-price {
                color: #ffc800;
                }
            }
        }

        .types{
            display: flex;
            flex-direction: row;
            margin-top: 15px;
            .item{
                margin-right: 15px;
            }
        }
        .date{
            margin-top: 15px;
        }
        .desc{
            margin-top: 15px;
            display: -webkit-box;
                /* autoprefixer: ignore next */
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                text-overflow: ellipsis;
                overflow: hidden;
        }
    }
  }
    
}
</style>
